<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>
  
  <body>
    <div class="x-nav">
    </div>
    <div class="x-body">
      
    
      <table class="layui-table">
        <thead>
          <tr>
            <th>房间ID</th>
            <th>房间名</th>
            <th>房间楼层</th>
            <th>房间所属大楼</th>
            <th>最近三个月的费用</th>
           </tr>
        </thead>
        <tbody id='roomList'>
          
        </tbody>
      </table>
      <div class="page">
        <div>
          <a class="prev" href="">&lt;&lt;</a>
          <a class="num" href="">1</a>
          <span class="current">2</span>
          <a class="num" href="">3</a>
          <a class="num" href="">489</a>
          <a class="next" href="">&gt;&gt;</a>
        </div>
      </div>

    </div>
    <script id="tpl">
       
        <tr>
            <td>{{ d.roomId }}</td>
            <td>{{ d.roomName }}</td>
            <td>{{ d.floor }}</td>
            <td>{{ d.buildingName }}</td>
            <td>
              <button class="layui-btn electric" ><i class="layui-icon">&#xe642;</i>电费</button>
              <button class="layui-btn water" onclick="waterFun()"><i class="layui-icon">&#xe642;</i>水费</button>
              <button class="layui-btn gas" ><i class="layui-icon">&#xe642;</i>燃气费</button>
            </td>
          </tr>
        
    </script>
    <script>
        layui.use(['laytpl','laypage'], function() {
        	$.ajax({
                type:"post",
                url:"../Information/showRoomByUserId",
                async: true,
                success : function(result){
                    var getTpl = document.getElementById("tpl").innerHTML;
                    var view = document.getElementById('roomList');
                    var arr=[];
                    $.each(result, function(i,item) {
                        layui.laytpl(getTpl).render(item, function(html){
                            arr.push(html)
                        });
                    });
                    view.innerHTML = arr.join('');
                },
                error:function(){
                    
                }
            });
        });
            
            function myfun(url) {
                  //多窗口模式，层叠置顶
                  layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '当你选择该窗体时，即会在最顶端'
                    ,area: [($(window).width()*0.9)+'px', ($(window).height()-50)+'px']//$(window).width() $(window).height()  
                    ,shade: 0
                    ,maxmin: true
                    ,offset: [ //为了演示，随机坐标
                      Math.random()*(30)+20
                      ,Math.random()*(80)+20
                    ] 
                    ,content: url
                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero){
                      layer.setTop(layero); //重点2
                    }
                });
            };
            function get3MonthBefor(){
                var resultDate,year,month,date,hms;
                var currDate = new Date();
                year = currDate.getFullYear();
                month = currDate.getMonth()+1;
                date = currDate.getDate();
                switch(month)
                {
                  case 1:
                  case 2:
                  case 3:
                    month += 9;
                    year--;
                    break;
                  default:
                    month -= 3;
                    break;
                }
                month = (month < 10) ? ('0' + month) : month;
                resultDate = year + '-'+month+'-'+'01';
              return resultDate;
            };
        
            function waterFun() {
                myfun("fix.html");
                var startMonths = get3MonthBefor();
                var endMonths = new Date();
                console.log(startMonths);
                console.log(endMonths);
                $.ajax({
                    type: "get",
                    url: "../findWaterConsume",
                    async: true,
                    data: {
                        "startMonths": startMonths
                    },
                    success: function(result) {
                        layer.alert("ok", {
                            icon: 1
                        });
                    },
                    error: function() {
                        layer.alert("与服务器连接异常", {
                            icon: 2
                        });
                    }
                }); 
            };
       
    </script>
    
    
  </body>

</html>